development

Building Role-Based Access Applications with Lovable & Supabase

A step-by-step guide for non-coders to create secure, multi-portal applications.

#development#AI#vibe-coding

What You'll Build

A Property Management Platform with two distinct portals:

Property Owner Portal: Where landlords manage their properties, view bookings, and track revenue

Tenant Portal: Where renters browse listings, submit applications, and manage their tenancies

Each portal has different access levels and sees completely different data based on their role.


Why This Matters

Role-based access control (RBAC) ensures users only see what they're meant to see. A tenant shouldn't access landlord financials. A property owner shouldn't see another owner's listings. This guide shows you how to build this security from scratch, no coding required.

What You Need

  • A Lovable account (lovable.dev)
  • A Supabase account (supabase.com)
  • 30-45 minutes of focused time

Step 1: Set Up Your Supabase Project

Create Your Project

Go to supabase.com and create a new project. Choose a memorable name like "property-manager" and set a strong database password.

Wait 2-3 minutes for Supabase to provision your database.


Step 2: Open Lovable and Connect to Supabase

Start Your Lovable Project

Log into Lovable and create a new project. Give it a clear name: "Property Management Platform".

Connect Supabase

In Lovable's interface, look for the database connection icon, top right of the screen. Choose your Supabase project from the modal.

This connection lets Lovable read and write to your Supabase database automatically.


Step 3: Create Your Database Structure with a Single Prompt

Here's where Lovable shines. Instead of manually creating database tables, you'll describe what you need and Lovable handles the rest.

The Master Prompt

Copy this prompt into Lovable's chat interface:

Create a property management platform with role-based access control using Supabase.

DATABASE STRUCTURE:
1. Create a user_roles table with columns:
   - id (uuid, primary key)
   - user_id (uuid, references auth.users)
   - role (text: either 'owner' or 'tenant')
   - created_at (timestamp)

2. Create a property_owner_profiles table with columns:
   - id (uuid, primary key)
   - user_id (uuid, references auth.users)
   - business_name (text)
   - phone (text)
   - properties_count (integer, default 0)
   - total_revenue (decimal)
   - created_at (timestamp)

3. Create a tenant_profiles table with columns:
   - id (uuid, primary key)
   - user_id (uuid, references auth.users)
   - full_name (text)
   - phone (text)
   - employment_status (text)
   - monthly_income (decimal)
   - move_in_date (date)
   - created_at (timestamp)

4. Create a properties table with columns:
   - id (uuid, primary key)
   - owner_id (uuid, references property_owner_profiles)
   - address (text)
   - rent_amount (decimal)
   - bedrooms (integer)
   - available (boolean, default true)
   - created_at (timestamp)

APPLICATION FEATURES:
- Create sign-up flow where users choose their role (Owner or Tenant)
- After sign-up, create the appropriate profile based on role selection
- Property Owner Portal should show:
  * Dashboard with total properties and revenue
  * List of their properties with add/edit/delete functions
  * Tenant applications for their properties
  
- Tenant Portal should show:
  * Available properties to browse
  * Their current tenancy details
  * Application submission form
  * Payment history

- Implement Row Level Security (RLS) so owners only see their data and tenants only see their data
- Use Supabase authentication for login/logout
- Create separate routes: /owner-dashboard and /tenant-dashboard

Wait for Lovable to Build

Lovable will now generate your entire application structure. This takes 30-60 seconds. You'll see it creating components, setting up routes, and configuring database tables.

Don't interrupt this process.


Step 4: Verify Your Database Tables in Supabase

Check Your Tables Were Created

Switch back to your Supabase dashboard. Click on "Table Editor" in the left sidebar.

You should see four new tables:

  1. user_roles - Links users to their role type
  2. property_owner_profiles - Stores landlord information
  3. tenant_profiles - Stores renter information
  4. properties - The actual property listings

Inspect the Table Structure

Click on user_roles table. You should see these columns:

  • id
  • user_id
  • role
  • created_at

If any columns are missing or incorrectly named, tell Lovable: "The user_roles table is missing the role column. Please fix this."

Check Row Level Security (RLS)

Click on a table, then the "RLS" tab. You should see policies enabled. These policies ensure users can only access their own data.

If RLS shows "Disabled", tell Lovable: "Enable Row Level Security on all tables so owners can't see other owners' data."


Step 5: Test Your Application

Preview Your App

Click Lovable's preview button. Your application should load in a new window.

Create Test Accounts

Create two test accounts:

  • Property Owner Account: Use owner@test.com / password123
  • Tenant Account: Use tenant@test.com / password123

When signing up, you'll be asked to select your role. Choose appropriately.

Verify Portal Separation

Log in as the property owner. You should see the owner dashboard with options to add properties.

Log out and log in as the tenant. You should see a completely different interface focused on browsing properties.

Test the Security

Try to manually navigate to /owner-dashboard while logged in as a tenant by editing the URL. Your app should redirect you or show an "Access Denied" message. This confirms your role-based access is working.


Step 6: Common Issues and Fixes

Problem: Users Can See Each Other's Data

This means RLS isn't working properly.

Fix: Tell Lovable "Create Row Level Security policies so property owners only see their properties and tenants only see properties marked as available."

Problem: Sign-Up Doesn't Ask for Role

Your role selection isn't being captured during registration.

Fix: Tell Lovable "Add a role selector to the sign-up form with radio buttons for Owner or Tenant. Save this to the user_roles table after registration."

Problem: Wrong Portal After Login

Users aren't being routed based on their role.

Fix: Tell Lovable "After login, check the user's role in user_roles table and redirect to /owner-dashboard for owners or /tenant-dashboard for tenants."


Step 7: Customise Your Application

Now that your base is working, enhance it:

Add More Fields

"Add a profile photo upload field to both owner and tenant profiles using Supabase Storage."

Create Property Filters

"Add filter options to the tenant portal so they can filter properties by price range, number of bedrooms, and location."

Build a Messaging System

"Create an inbox feature where tenants can message property owners about listings."

Add Payment Integration

"Integrate Stripe so tenants can pay rent through the platform. Show payment history in tenant dashboard."


Key Principles to Remember

Be Specific with Prompts

Instead of "add a search feature", say "add a search bar to the tenant dashboard that filters properties by address, price range, and bedroom count."

One Feature at a Time

Don't ask for 10 features in one prompt. Build iteratively. Get one thing working, then add the next.

Always Verify in Supabase

Every time Lovable creates or modifies a table, check Supabase to ensure it matches your expectations. The database is your source of truth.

Test Each Role Separately

Always test new features while logged in as both an owner and a tenant. Features that work for one role might break for another due to RLS policies.

Use Clear Naming

Keep table names and column names descriptive. property_owner_profiles is better than profiles1. Future-you will thank present-you.


Understanding What Lovable Did Behind the Scenes

While you didn't write code, here's what Lovable built for you:

Database Schema: Four interconnected tables with proper foreign key relationships ensuring data integrity.

Authentication System: Email/password login using Supabase Auth with session management.

Row Level Security: Database-level security policies that prevent unauthorised data access, even if someone tries to bypass the UI.

Role-Based Routing: Logic that checks user roles and shows the appropriate dashboard.


Taking It Further

This foundation supports countless extensions:

  • Maintenance request tracking
  • Automated rent reminders via email
  • Document storage for leases
  • Property inspection scheduling
  • Multi-property portfolio analytics
  • Tenant screening and background checks
  • Online lease signing with e-signatures

Each feature follows the same pattern: describe what you want in clear detail, let Lovable build it, verify in Supabase, and test both portals.


Security Best Practices You're Already Following

Principle of Least Privilege: Users only access what they need for their role. Tenants can't delete properties. Owners can't see other owners' financials.

Database-Level Security: RLS policies enforce access control at the database layer, not just in the application code. This prevents security bypass attempts.

Separate Profiles: Keeping owner and tenant data in separate tables prevents accidental data leakage and makes queries more efficient.

Authenticated Access Only: Every database query requires a valid user session. Anonymous users can't read your data.


Troubleshooting Tips

Changes Aren't Showing in Preview

Hard refresh the preview window (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac). Sometimes the cache needs clearing.

Database Queries Are Slow

Check if your tables have indexes. Tell Lovable "Add database indexes to the user_id columns on all tables to improve query performance."

Can't Delete Test Data

Go to Supabase > Table Editor, click on the table, and manually delete rows. Or tell Lovable "Create an admin panel where I can view and delete test data."


Final Thoughts

You've built a production-ready, role-based access application without writing a single line of code. The database is properly structured, security is enforced at multiple layers, and users get personalised experiences based on their role.

This same pattern applies to any multi-portal application:

  • Patient portal vs Doctor portal in healthcare
  • Student portal vs Teacher portal in education
  • Client portal vs Agency portal for creative services
  • Customer portal vs Support portal for SaaS products

Master this foundation and you can build almost any business application using Lovable and Supabase.

The key is clear communication. Treat Lovable like a skilled developer on your team who needs precise instructions but handles all the technical implementation perfectly.

Now go build something remarkable, or get in touch if you prefer us to build it for you.

Ready to Fix Your Business Processes?

Let's work together to build the tools your business needs.

Book a Free Call